<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
	
	<f:view>
		<h:head>
 	<script type="text/javascript">
    function processSelectEvent (event){
		console.debug(event.srcElement.nextSibling.innerText);
		var id = document.getElementById("complete:valueId");
		id.value = event.srcElement.nextSibling.innerText;
}
	</script>

	</h:head>
		<h:body>
		    <h:form id="complete">		
				<rich:panel header="other auto-completion">
		            <f:facet name="header">
		                <h:outputText value="Pick from list with columns"></h:outputText>
		            </f:facet>
					<rich:autocomplete
						autocompleteMethod="#{completer.autocomplete}"
						mode="ajax" 
						showButton="true"
						layout="table"
						var="data"
						fetchValue="#{data.name}" 
						id="tagnames_dictionaryen"
						value="#{tagCollector.valueName}" 
						converter="NameIdConverter">
							<rich:column>
							#{data.name}
							</rich:column>
							<rich:column>
							#{data.id}
							</rich:column>
					</rich:autocomplete>
					<br/>
					<h:commandButton id="addbutton" value="Add">
						<f:ajax event="click" listener="#{tagCollector.add}"
							execute="@form" render=":status" />
					</h:commandButton>			
				</rich:panel>				
		    </h:form>
			<h:outputText id="status" value="#{tagCollector.status}" />
		</h:body>
	</f:view>
</ui:composition>
